<template>
  <div>
    <div style="display: flex;flex-direction: row;padding: 10px;background: white;margin-top: 10px">
      <div style="display: flex;flex-direction: column;flex: 1">
      <span
        style="font-size: 15px;color: #455C93;text-align: left;">定期{{product.term}}</span>
        <span style="font-size: 13px;margin-top: 3px;color: #888F99;text-align: left;">存款利率{{product.rate}}</span>
      </div>
      <div
        style="border-radius: 30px;border: 1px solid #589BD1;color:#589BD1;
        width: 65px;height:20px;font-size: 13px;line-height: 19px;text-align: center;padding: 0px 5px;margin-top: 13px">
        修改期限
      </div>
    </div>

    <div style="display: flex;flex-direction: row;padding: 10px;background: white;margin-top: 10px"
         v-on:click="isShowKeyboard=~isShowKeyboard">
      <span style="font-size: 15px;color: #455C93;text-align: left;">输入金额</span>
      <span style="margin-left:10px;font-size: 15px">{{money}}</span>
      <span style="margin-left:10px;font-size: 15px;color: #D4DAE8"
            v-if="money==''">{{placeholder}}</span>
    </div>

    <div
      style="margin-top: 10px;background: white;display: flex;flex-direction: row;color: #425C95;padding: 10px;font-size: 15px"
      v-on:click="onSelectBankCardClick">
      <span style="font-size: 15px;">付款账户</span>
      <span class="selected-bank-info">{{selectedBankCard.bankTitleShow}}</span>
    </div>

    <div
      style="margin-top: 10px;background: white;display: flex;flex-direction: row;color: #425C95;padding: 10px;font-size: 15px"
      v-on:click="onSelectPlanClick">
      <span style="font-size: 15px;">到期安排</span>
      <span class="selected-plan">{{selectedPlan.name}}</span>
    </div>

    <select-deposit-term-sheet-up @onTermSelected="onTermSelected" :selectedTerm="selectedTerm"
                                  :visible="isShowSelectTerm">

    </select-deposit-term-sheet-up>

    <select-bank-card-sheet-up @onBankCardSelected="onBankCardSelected" :selectedBankCard="selectedBankCard.bankCard"
                               :visible="isShowSelectBankCard"></select-bank-card-sheet-up>


    <select-plan-sheet-up @onPlanSelected="onPlanSelected" :selectedPlan="selectedPlan"
                          :visible="isShowSelectPlan"></select-plan-sheet-up>

    <x-button :gradients="buttonGradients"
              style="width: 80%;border-radius:30px;padding: 5px;margin-top: 40px;"
              @click.native="onSiphonIntoClick" :disabled="buttonDisabled">
      立刻转入
    </x-button>

    <money-input-keyboard @onFinished="onFinished" @onMoneyChanged="onMoneyChanged"
                          :initMoney="money"
                          v-if="isShowKeyboard"></money-input-keyboard>
  </div>
</template>

<script>
  import { XButton, XAddress } from 'vux'
  import MoneyInputKeyboard from '@/components/MoneyInputKeyboard'
  import SelectBankCardSheetUp from '@/components/SelectBankCardSheetUp'
  import SelectPlanSheetUp from '@/components/SelectPlanSheetUp'
  import SelectDepositTermSheetUp from '@/components/SelectDepositTermSheetUp'

  export default {
    name: 'HelloWorld',
    components: {
      XButton,
      XAddress,
      MoneyInputKeyboard,
      SelectBankCardSheetUp,
      SelectPlanSheetUp,
      SelectDepositTermSheetUp
    },
    data () {
      return {
        isShowKeyboard: true,
        money: '',
        placeholder: '50元起存',
        buttonDisabled: true,
        isShowSelectBankCard: false,
        selectedBankCard: {
          bankTitleShow: '建设银行(4354)',
          bankCard: {
            bankName: '建设银行',
            bankNo: '4',
            cardNo: '4354',
            cardId: '0987665676',
            balance: '10000',
            currentLimit: '10000',
            species: '储',
            isSelected: true
          }
        },
        isShowSelectPlan: false,
        selectedPlan: {name: '到期滚存', description: '2019年02月09日到期后本金及收益全部再定存3个月', id: '01'},
        buttonGradients: ['#f2b08e', '#f2b08e'],
        product: {},
        productPlan: [
          {name: '到期滚存', code: '0001'},
          {name: '取出到微众卡', code: '0002'},
          {name: '取出到活期+', code: '0003'}
        ],
        isShowSelectTerm: true,
        selectedTerm: {}
      }
    },
    created () {
      this.$store.commit('setTitle', '转入')
      this.product = JSON.parse(decodeURIComponent(this.$route.query.product))
      console.log(this.product)
    },
    methods: {
      onMoneyChanged: function (money) {
        if (this.isShowKeyboard) {
          this.money = money
        }
      },
      onShowKeyboardClick: function () {
        this.isShowKeyboard = !this.isShowKeyboard
      },
      onFinished: function () {
        this.isShowKeyboard = false
      },
      onBankCardSelected: function (bankCard) {
        this.isShowSelectBankCard = !this.isShowSelectBankCard
        this.selectedBankCard.bankTitleShow = bankCard.bankName + '(' + bankCard.cardNo + ')'
        this.selectedBankCard.bankCard = bankCard
      },
      onSelectBankCardClick: function () {
        this.isShowKeyboard = false
        this.isShowSelectBankCard = !this.isShowSelectBankCard
      },
      onPlanSelected: function (plan) {
        this.isShowSelectPlan = !this.isShowSelectPlan
        this.selectedPlan = plan
        console.log('test')
      },
      onSelectPlanClick: function () {
        this.isShowKeyboard = false
        this.isShowSelectPlan = !this.isShowSelectPlan
      },
      onTermSelected: function () {
        this.isShowKeyboard = false
        this.isShowSelectTerm = !this.isShowSelectTerm
      },
      onSiphonIntoClick: function () {
        this.isShowKeyboard = false
        this.isShowSelectBankCard = false
        console.log('test')
        this.$vux.alert.show({
          title: '温馨提示',
          content: '仅提供演示，暂时不能转入',
          onShow () {

          },
          onHide () {
          }
        })
      }
    },
    watch: {
      money: function (current, old) {
        if (current > 0) {
          this.buttonDisabled = false
        } else {
          this.buttonDisabled = true
        }
      },
      buttonDisabled: function (curVal, oldVal) {
        console.log(curVal + '|' + 'buttonDisabled')
        if (curVal) {
          this.buttonGradients = ['#f2b08e', '#f2b08e']
        } else {
          this.buttonGradients = ['#F29360', '#F29360']
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .selected-bank-info {
    margin-left: 20px;
    flex: 1;
    font-size: 15px;
  }

  .selected-bank-info::after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -1px;
    left: 58.5%;
  }

  .selected-plan {
    margin-left: 20px;
    flex: 1;
    font-size: 15px;
  }

  .selected-plan::after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -1px;
    left: 73.5%;
  }
</style>
